<template>
  <a-modal :maskClosable="false" :visible="visible" @ok="close" @cancel="close" width="1200px">
    <div style="margin-left:50px">
        <span>展示相似度</span>
        <a-input-number
          style="width:80px; margin:0 10px"
          :min="0"
          :max="100"
          :precision="2"
          v-model = "num"
        ></a-input-number>
        <span>%以上的组合</span>

        <a-button
          type="primary"
          style="border-radius:3px;margin-bottom:20px; margin-left:100px"
          @click="findNewData"
        >查询</a-button>
      </div>
    <a-card :bordered="false">
      <table v-for="(item, index) in tableList" :key="index" style="margin:0 20px 20px 0; display:inline-block; vertical-align:top">


        <!-- 第一行 -->
        <tr>
          <!-- 第一行第一列,百分比 -->
          <td style="padding:5px 13px; height:70px" align="center">
            {{(item.repeatBomListName.length / item.allBomName.length * 100).toFixed(2)}} %
          </td>
          <!-- 第一行后面的列, 显示生产单号 -->
          <td style="padding:5px 13px; height:70px;" align="center" v-for="(item0,index0) in item.orderBomRespList" :key="index0">{{item0.orderNum}}</td>
        </tr>


        <!-- 下面的行 -->
        <tr v-for="(item1,index1) in item.allBomName" :key="index1">
          <!-- 第一列,显示bom名称 -->
          <td style="padding:5px 13px; height:20px">{{item1.bomName}}</td>
          <!-- 后面的列,展示颜色-->
          <td 
            v-for="(item0,index0) in item.orderBomRespList" 
            :key="index0"
            style="position:relative; height:20px"
          >
            <div v-for="(itemInner, indexInner) in item0.bomIdList" :key="indexInner">
              <div 
                v-if="itemInner==item1.bomId"
                style="position:absolute; top:0; left:0; bottom:0; right:0; background:#66baff"
              >
              </div>
            </div>
          </td>
        </tr>


      </table>
    </a-card>
  </a-modal>
</template>

<script>
import {STable} from '@/components'
// import {doRecommendedProduction} from '@/api/modular/main/emsorder/emsOrderManage'

export default {
  components: {
    STable,
  },
  props: {
    onRowSelected: {}
  },
  data() {
    return {
      num:'',   //输入框数值
      visible: false,
      advanced: false, // 高级搜索 展开/关闭
      queryParam: {},  // 查询参数
      columns: [       // 表头
        // {
        //   title: '序号', width:'80px',
        //   dataIndex: 'index',
        //   key: 'index',
        //   align: 'center',
        //   customRender: (text, record, index) => `${index + 1}`,
        // },
        {
          title: 'BOM编码',
          dataIndex: 'bomCode'
        },
        {
          title: 'BOM名称',
          dataIndex: 'bomName'
        },
        {
          title: '优先级',
          dataIndex: 'bomClassSort'
        },
        {
          title: '数量',
          dataIndex: 'number'
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   width: '80px',
        //   scopedSlots: {customRender: 'action'}
        // }
      ],
      // 加载数据方法 必须为 Promise 对象
      // loadData: parameter => {
      //   return doRecommendedProduction(Object.assign(parameter, this.record)).then((res) => {
      //     let rows = res.data
      //     return {
      //       pageNo: 1,
      //       totalRows: 99999,
      //       rows: rows
      //     }
      //   })
      // },
      selectedRowKeys: [],
      selectedRows: [],
      defaultExpandedKeys: [],
      replaceFields: {
        key: 'id',
      },
      previewVisible: false,
      previewImage: '',
      record: null,
      tableList:[]   //查到的表格数据
    }
  },
  methods: {
    show(record) {
      this.visible = true
      // console.log('选中项', record)
      this.tableList = record.value
      // 处理数据
      this.num = record.beforeNum
      this.orderIdList = record.selectedList.map((item)=>{ return item.orderId })
    },
    close() {
      this.visible = false
      this.num = ''
    },
    // 查询按钮
    findNewData(){
      // 调取接口,获取数据
      this.axios.post('/emsOrder/recommendedProduction', {orderIdList:this.orderIdList, pro:this.num/100}).then((res)=>{
        if(res.success){ 
            this.tableList = res.data
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}

.table-image {
  cursor: pointer;
  max-width: 100px;
  max-height: 50px;
  border: solid 1px #cccccc;
}

td{
  display: inline-block;
  width: 100px;
  min-height: 35px;
  border:1px solid #888;
  font-size: 10px;
  vertical-align: middle !important;
}
</style>
